<template>
  <div class="container">
    <edit-page-new
      ref="editPage"
      :rightBtnArr="rightBtnArr"
      :showTopTitle="true"
    >
      <template slot="editPageTitle">
        <div>权限分配页面</div>
      </template>
      <div class="character">
        当前角色：
        <div class="name">{{ character.name }}</div>
      </div>
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="组织权限及菜单配置" name="first">
            <orinization-menu
              :authInformation="authInformation"
              ref="orgAndMenu"
            />
          </el-tab-pane>
          <el-tab-pane lazy label="用户配置" name="second">
            <user-config :userAuth="userAuth" ref="userAuth" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </edit-page-new>
  </div>
</template>

<script>
import orinizationMenu from "./orgnizationAndMenu.vue";
import userConfig from "./userConfig.vue";
import {
  queryAppAllInfoJurisdiction,
  queryUserJurisdiction,
  saveRoleJurisdiction,
} from "@/api/systemManagement/authManagement.js";
export default {
  components: {
    orinizationMenu,
    userConfig,
  },
  data() {
    return {
      activeName: "first",
      rightBtnArr: [
        {
          text: "保存",
          icon: "icon-a-wanchengbaocun",
          methods: () => {
            // this.doSubmit("save");
            this.save();
          },
        },
      ],
      character: {
        id: "",
        name: "",
      },
      authInformation: [],
      userAuth: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    //初始化角色信息
    init() {
      this.character.id = this.$route.query.id;
      this.character.name = this.$route.query.name;
      this.getCharacterDetail();
      //this.getUserAuth();
    },
    //获取应用、组织、菜单的信息
    getCharacterDetail() {
      queryAppAllInfoJurisdiction({ roleId: this.character.id }).then((res) => {
        if (res.code == 200) {
          this.authInformation = res.data.appJurisdictionBeanList;
          this.userAuth = res.data.roleStaffBeanList;
        }
      });
    },
    //获取人员权限信息
    getUserAuth() {
      queryUserJurisdiction({ roleId: this.character.id }).then((res) => {
        if (res.code == 200) {
          this.userAuth = res.data.roleStaffBeanList;
        }
      });
    },
    //保存权限信息
    save() {
      const queryData = {};
      queryData.roleId = this.character.id;
      queryData.appJurisdictionBeanList =
        this.$refs.orgAndMenu.getorgMenuAuth();
      queryData.roleStaffBeanList = this.$refs.userAuth
        ? this.$refs.userAuth.getSelectUser()
        : this.userAuth;
      saveRoleJurisdiction(queryData).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.description);
          this.getCharacterDetail();
        }
      });
    },
    handleClick(tab, event) {},
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  //border: 10px solid #F2F3F8;
  position: relative;
  .character {
    position: absolute;
    left: 108px;
    top: 60px;
    font-size: 15px;
    .name {
      display: inline-block;
      border: 1px solid red;
      text-align: center;
      padding: 4px;
      font-size: 12px;
      color: red;
    }
  }
  .content {
    height: 100%;
  }
  /deep/.el-tabs {
    height: 100% !important;
  }
  /deep/.el-tabs .el-tabs__content {
    height: calc(100% - 60px);
  }
  /deep/.el-tabs .el-tab-pane {
    height: 100%;
  }
}
</style>